﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="" />
 
    <!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
    <title>无人岛</title>
    <!-- BOOTSTRAP CORE STYLE -->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FONT AWESOME ICON STYLE -->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- CUSTOM STYLE CSS -->
    <link href="assets/css/style.css" rel="stylesheet" />
</head>


<body>
    <div id="header">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 logo-div">
                        <div class="logo-inner text-center">
                            <div class="logo-name">
                                <a href="index.html">
                                    <img src="assets/img/me.jpg" class="img-circle" />
                                </a>
                            </div>

                        </div>

                    </div>
                    <div class="col-md-8 header-text-top " id="about">


<!-- 标题 -->

		

                </div>
            </div>
        </div>
    </div>
    <!--END HEADER SECTION-->
    <div class="info-sec">
        <div class="container">
            <div class="col-md-10">
            <!--导航条-->
            <nav  class="navbar navbar-default" role="navigation">
				<div class="container-fluid">

				<div>
					<ul class="nav navbar-nav">
						<li class="active"><a href="/index.html">首页</a></li>
						<li><a href="#">归档</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								分类
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#">Java</a></li>
								<li><a href="#">Spring</a></li>
								<li><a href="#">Mybatis</a></li>
								<li class="divider"></li>
								<li><a href="#">前端</a></li>
								<li class="divider"></li>
								<li><a href="#">Linux</a></li>
							</ul>
						</li>
					</ul>
				</div>
				</div>
			</nav>
			</div>
			
                <div class="col-md-2">
                    <div class="social-link">
                    
                         <button type="button" class="btn btn-primary " style="text-shadow: black 5px 3px 3px;"><span class="glyphicon glyphicon-leaf"></span> 注册</button>
                        <button onclick="window.open('/admin','_blank');" type="button" class="btn btn-primary " style="text-shadow: black 5px 3px 3px;"><span class="glyphicon glyphicon-user"></span> 登陆</button>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="copyrights">由 Jhon Deo 设计</div>
    
    <!--文章代码-->
    <div class="container">

        <div class="row">

            <div class="col-md-8 ">
                <div id="article_area">
<div class='blog-post'><h2></h2><h4>Posted by <a href='#'>admin</a> on  </h4><p></p><a href='/read.html?id="+id+"' class='btn btn-default btn-lg '>文章详情 <i class='fa fa-angle-right'></i></a> </div>
<div class='blog-post'><h2></h2><h4>Posted by <a href='#'>admin</a> on  </h4><p></p><a href='/read.html?id="+id+"' class='btn btn-default btn-lg '>文章详情 <i class='fa fa-angle-right'></i></a> </div>
<div class='blog-post'><h2></h2><h4>Posted by <a href='#'>admin</a> on  </h4><p></p><a href='/read.html?id="+id+"' class='btn btn-default btn-lg '>文章详情 <i class='fa fa-angle-right'></i></a> </div>
<div class='blog-post'><h2></h2><h4>Posted by <a href='#'>admin</a> on  </h4><p></p><a href='/read.html?id="+id+"' class='btn btn-default btn-lg '>文章详情 <i class='fa fa-angle-right'></i></a> </div>
<div class='blog-post'><h2></h2><h4>Posted by <a href='#'>admin</a> on  </h4><p></p><a href='/read.html?id="+id+"' class='btn btn-default btn-lg '>文章详情 <i class='fa fa-angle-right'></i></a> </div>
                </div>

                <br />
                <!-- 页码组件 -->
                <nav>
                    <ul id="pageArea" class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-3" style="padding-top: 30px;">
				<div class="row">
               <div class="list-group"  >
				<a class="list-group-item active">文章分类</a>
				<div id="category">
				<div class="list-group-item sx" ><a href="#" style="text-decoration:none"> </a></div>
				<div class="list-group-item sx" ><a href="#" style="text-decoration:none"> </a></div>
			    <div class="list-group-item sx" ><a href="#" style="text-decoration:none"> </a></div>
			   </div>
			   </div>
				</div>
				<div id="popularlist2" class="row container-fluid row-fluid"> 
				<h3>最受欢迎的文章</h3>
				<ol>

				<li>加载中</li>
				</ol> 

				</div>
            </div>

        </div>


    </div>
<footer class="bottom">
  <div class="container" style="text-align:right">
     &copy; 2017 无人岛 |  designed by Jhon Deo
 </div>
</footer>
    
    <!-- END FOOTER SECTION -->
    <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
    <!-- CORE JQUERY -->
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- BOOTSTRAP SCRIPTS -->
    <script src="assets/js/bootstrap.js"></script>
 
 <script type="text/javascript">  
      
     $.getUrlParam = function (name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]); return 1;
                };
     	
 $(document).ready(function(){
 //得到文章列表
         $.ajax({  
             url: '/article/getArticle',  
             type: 'POST',  
             dataType: 'json', 
			 data:'page='+$.getUrlParam('page'), 
             timeout: 1000,  
             cache: false, 
             async : true, 
             beforeSend: LoadFunction, //加载执行方法    
             error: erryFunction,  //错误执行方法    
             success: succFunction //成功执行方法    
         })  
         function LoadFunction() {  
             $("#list").html('加载中...');  
         }  
         function erryFunction() {  
             $("#list").html('加载失败...');  
         }  
         function succFunction(data2) {  
             $("#article_area").html('');  
  
             var json = eval(data2); //数组         
             $.each(json, function (index, item) {  
                 //循环获取数据    
                 var id = json[index].id;
                 var title = json[index].title;  
                 var content = json[index].content;  
                 var password = json[index].password;  
                 var publishTime=json[index].publishTime;
                 
                 var newDate = new Date();
				 newDate.setTime(publishTime * 1000);
                 $("#article_area").append("<div class='blog-post'><h2>"+title+"</h2><h4>由 <a href='#'>admin</a> 发布于 "+newDate.toLocaleString()+" </h4><p>"+content+"</p><a href='/read.html?id="+id+"' class='btn btn-default btn-lg '>文章详情 <i class='fa fa-angle-right'></i></a> </div>");  
             });  
         };
         
});
     
 $(document).ready(function(){
 //category
		 $.ajax({  
             url: '/article/getCategory',  
             type: 'GET',  
             dataType: 'json', 
             timeout: 1000, 
             cache: false,    
             success: succFunction //成功执行方法    
         })  
         function succFunction(data) {  
             $("#category").html("");  
  
             var json = eval(data); //数组         
                 $.each(json, function (index, item) {  
                 //循环获取数据  
                 var id = item.id;
                 var category = item.category;  
                 $("#category").append("<div class='list-group-item sx' ><a href=\'/category.html?category="+category+"\' style='text-decoration:none'>"+category+"</a></div>");  
                 });
     		}
         
});     
       
     
     $(document).ready(function(){
 //popular
		 $.ajax({  
             url: '/article/getpopularlist',  
             type: 'GET',  
             dataType: 'json', 
             timeout: 1000, 
             cache: false,  
             success: succFunction //成功执行方法    
         })  
		function succFunction(data) {  
             $("#popularlist2").html("<h3>最受欢迎的文章</h3><ol>");  
  
             var json = eval(data); //数组         
                 $.each(json, function (index, item) {  
                 //循环获取数据  
                 var id = item.id;
                 var popularPoint = item.popularPoint; 
                 $("#popularlist2").append("<li><div style='font-size:15px;'><a href='/read.hrml?id='"+id+">《"+item.title+"》</a>评分:"+popularPoint+"</div></li>");  
                 });
     		} 
         
});
     
     
     $(function () { 
     //得到页码
      $.ajax({  
             url: '/article/getPageIdList',  
             type: 'POST',  
             dataType: 'json', 
			 data:'page='+$.getUrlParam('page'), 
             timeout: 1000,  
             cache: false,  
             beforeSend: LoadFunction, //加载执行方法    
             error: erryFunction,  //错误执行方法    
             success: succFunction //成功执行方法    
         });  
         function LoadFunction() {  
             $("#list").html('加载中...');  
         }  
         function erryFunction() {  
             $("#list").html('加载失败...');  
         }  
         function succFunction(data4) {  
           $("#pageArea").empty();
           $("#pageArea").append("<li><a href='#' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>");
           if(("page1" in data4)==true){$("#pageArea").append("<li> <a href=/index.html?page="+data4.page1+">"+data4.page1+"</a></li>")}
           if(("page2" in data4)==true){$("#pageArea").append("<li><a href=/index.html?page="+data4.page2+">"+data4.page2+"</a></li>")}
           if(("page3" in data4)==true){$("#pageArea").append("<li><a href=/index.html?page="+data4.page3+">"+data4.page3+"</a></li>")}
           if(("page4" in data4)==true){$("#pageArea").append("<li><a href=/index.html?page="+data4.page4+">"+data4.page4+"</a></li>")}
           if(("page5" in data4)==true){$("#pageArea").append("<li><a href=/index.html?page="+data4.page5+">"+data4.page5+"</a></li>")}
           if(("page6" in data4)==true){$("#pageArea").append("<li><a href=/index.html?page="+data4.page6+">"+data4.page6+"</a></li>")}
           if(("page7" in data4)==true){$("#pageArea").append("<li><a href=/index.html?page="+data4.page7+">"+data4.page7+"</a></li>")}
            $("#pageArea").append("<li><a href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>");
         };  

		});
		
    </script> 


</body>
</html>